<template>
    <facenterImg v-if="route.params.data === 'facenter'"></facenterImg>
    <div class="region region--full">
        <comImg :imgData="imgData"></comImg>
    </div>
    <div class='container container--zone'>
        <div class='region region--full removeLive'>
            <tabText :listlinkData='interList' :moreList='moreList' @tabChange="tabChange"></tabText>
            
            <div class="region region--primary">
                <pageHead :titleData='titleData' v-if="route.params.data !== 'facenter'"></pageHead>
                <!-- fa中心专有 -->
                <div class="component component--module text__block" v-if="route.params.data === 'facenter'">
                    <div class="column column--primary">
                        <div class="element element--textblock">
                            <h4>Welcome to our FA Center</h4>
                            <p>A one-stop shop for financial advisers, Sinopoly Watch's FA Center provides you with the
                                latest
                                news in the industry, as well as ideas on investing, wealth management and retirement
                                planning.</p>
                        </div>
                    </div>
                </div>
                <!-- fa中心专有 -->
                <!-- 周刊专有 -->
                <div class="element element--textblock" v-if="route.params.data === 'barrons'">
                    <h4>Serious Investors Read Barron's</h4>
                    <p>Make the smartest investment decisions with access to Barron's in-depth analysis and unrivaled
                        market predictions — all conveniently accessed on Sinopoly Watch.com. <b><a>Learn More</a></b>
                    </p>
                </div>
                <!-- 周刊专有 大图带小图 左右模式 v-if="route.params.data === 'facenter'"-->
                <inverTingContent :titleName='titleName' :topContData='topContData' v-if="isCont">
                </inverTingContent>
                <!-- <marketLine :lastMarketData="lastMarketData"
                    v-if="route.params.data === 'crypto' || route.params.data === 'ipos' || route.params.data === 'fx'">
                </marketLine> -->
                <nationNew class='widthS' :usNewsData='usNewsData' style="margin-top:15px">
                </nationNew>
                <techStocks></techStocks>
                <middyPerort v-if="route.params.data === 'stocks'"></middyPerort>
                <etfWrap v-if="route.params.data === 'etfs'" :etfInbox="etfInbox"></etfWrap>
                <subNow :subNowData="subNowData"></subNow>
                <div class="component component--module text__block" v-if="route.params.data === 'bonds'">
                    <div class="column column--primary">
                        <div class="element element--textblock">
                            <h3>Related columns</h3>
                            <p><router-link to="">Futures Movers</router-link> | <router-link>Metals
                                    Stocks</router-link></p>
                        </div>
                    </div>
                </div>
                <tickerName :tickerNameData='tickerNameData' v-if="isTicker && tickerNameData.length > 0">
                </tickerName>
                <timeTableMk :timeNewsData='timeNewsData' :titleTime='titleTime' v-if="isTimeTable"
                    style="margin-top:15px"></timeTableMk>

            </div>
            <stickys :sticky="sticky"></stickys>
            <mastPopular :popularData="popularData"></mastPopular>
            <div class="region region--primary">
                <div class="component">
                    <header class="header header--primary" style="padding:0">
                        <h2 class="title">
                            <span class="label">{{ moreNewTitle }}</span>
                        </h2>
                    </header>
                    <futures :newsData="newsFotureData" :istime="false"></futures>
                    <div class="group group--buttons cover" v-if="newsFotureData.length > 6">
                        <button class="btn btn--secondary js--more-headlines">See More</button>
                        <button class="btn btn--primary js-search-top">Back to Top</button>
                    </div>
                    <!-- <nationNew class='widthS' :usNewsData='usNewsData' 
                        style="margin-top:15px"
                        v-if="route.params.data === 'facenter' || route.params.data === 'barrons'">
                    </nationNew> -->
                </div>

            </div>
            <stickys :sticky="sticky"></stickys>
        </div>
        <adverTiseMent></adverTiseMent>
    </div>
</template>
<script setup>
import facenterImg from './facenterImg/facenterImg.vue'
import tabText from '../../components/tabText/tabText.vue';
import inverTingContent from '../inverting/inverTingContent/inverTingContent.vue';
import subNow from '../home/subNow/subNow.vue'
import nationNew from '../market/nationNew/nationNew.vue'
import techStocks from './techStocks/techStocks.vue';
import etfWrap from './etfWrap/etfWrap.vue';
import middyPerort from './middyPerort/middyperort.vue';
import tickerName from '../market/ticketName/tickerName.vue';
import { useinteringArrays } from '../../api/interving';
import { usemkDataArrays } from '../../api/market';
import mastPopular from '../home/mastPopular/mastPopular.vue';
import futures from '../inverting/futures/futures.vue';
import adverTiseMent from '../home/adverTisement/adverTiseMent.vue';
import pageHead from '../../components/pageHead/pageHead.vue';
import timeTableMk from '../market/timeTableMk/timeTableMk.vue';
import marketLine from '../market/marketLine/marketLine.vue';
import comImg from "@/components/comImg/comImg.vue";
const imgData = ref("../src/assets/banner.png");
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
import homeRequest from "@/api/home.js";
import { useRoute } from 'vue-router'
const route = useRoute()
const { moreList, rightContData, etfInbox, subNowData } = useinteringArrays()
const { lastMarketData } = usemkDataArrays()
const titleData = reactive({
    title: "Barron's",
    link: 'Home',
    name: 'Investing',
    name1: "Barron's on Sinopoly Watch"
})
const popularData = ref([])
const interList = ref([])
const tabKey = ref('')
onMounted(() => {
    const data = localStorage.getItem('tabMdData')
    interList.value = JSON.parse(data).investing
    interList.value.forEach((item) => {
        if (item.typeName === 'Investing') {
            item.path = '/inverting'
        } else if (item.typeName === 'FA Center') {
            item.path = '/inverting/facenter'
        } else if (item.typeName === "Barron's") {
            item.path = '/inverting/barrons'
        } else if (item.typeName === "Earnings") {
            item.path = '/inverting/earnings'
        } else if (item.typeName === "Stocks") {
            item.path = '/inverting/stocks'
        } else if (item.typeName === "Funds") {
            item.path = '/inverting/funds'
        } else if (item.typeName === "ETFs") {
            item.path = '/inverting/etfs'
        } else if (item.typeName === "Bonds") {
            item.path = '/inverting/bonds'
        } else if (item.typeName === "Futures") {
            item.path = '/inverting/futures'
        } else if (item.typeName === "Crypto") {
            item.path = '/inverting/crypto'
        } else if (item.typeName === "FX") {
            item.path = '/inverting/fx'
        } else if (item.typeName === "IPOs") {
            item.path = '/inverting/ipos'
        } else if (item.typeName === "Cannabis") {
            item.path = '/inverting/cannabis'
        } else if (item.typeName === "Tech") {
            item.path = '/inverting/tech'
        }
    })
    // 刷新时保持数据
    let name = window.sessionStorage.getItem('titleData')
    if (name) {
        titleData.title = JSON.parse(name).typeName
        titleData.name1 = titleData.title
        tabKey.value = JSON.parse(name).typeKey
    }
    getNewList(tabKey.value)
    getMdList(tabKey.value)
    getTickList(tabKey.value)
})
const tabChange = (data) => {
    // 点击Tba切换时存数据
    window.sessionStorage.setItem('titleData', JSON.stringify(data))
    titleData.title = data.typeName
    titleData.name1 = titleData.title
    newList.value = []
    mdList.value = []
    tickerNameData.value = []
    getNewList(data.typeKey)
    getMdList(data.typeKey)
    getTickList(data.typeKey)
}

const titleName = reactive({
    name: '',
    info: ''
})
const titleName2 = reactive({
    name: '',
    info: "The latest cryptocurrency headlines from Sinopoly Watch"
})
const topContData2 = reactive({
    headline: '',
    src: "https://images.barrons.com/im-01737248?size=1.777777777777778&width=800",
    rightContData: rightContData,
    smallTwoImg: []
})
const nationName = ref("")

// 顶部
let topContData = reactive({
    headline: '',
    src: "",
    uuid: '',
    author: '',
    rightContData: [],
    smallTwoImg: []
})
const isCont = ref(false)
const moreNewTitle = ref('')// 更多新闻标题
const newList = ref([])// 更多新闻标题
const getNewList = (tabKey) => {
    let data = {
        key: tabKey  //当前页面
    }
    homeRequest.newsData(data)
        .then((res) => {
            console.log(res,'text');
            newList.value = res.data
            if (newList.value !== null) {
                console.log('111tetext')
                if (newList.value.records.length > 0) {
                    let rightContData = []
                    const length = newList.value.records.length
                    if (newList.value.records.length > 7) {
                        rightContData = newList.value.records.slice(3, 8)
                    } else {
                        rightContData = newList.value.records.slice(3, length)
                    }
                    topContData = ({
                        headline: newList.value.records[0].title,
                        src: newList.value.records[0].imgUrl,
                        uuid: newList.value.records[0].uuid,
                        author: newList.value.records[0].author,
                        rightContData: rightContData,
                        smallTwoImg: newList.value.records.slice(1, 3)
                    })
                    isCont.value = true
                    //更多新闻标题
                }
            }
        })
}
const newsFotureData = ref([])
const usNewsData = ref([])
const timeNewsData = ref([])
const titleTime = reactive({
    title: ''
})
const mdList = ref([])
const isTimeTable = ref(false)
// 获取数据
const getMdList = (tabKey) => {
    let data = {
        key: tabKey  //当前页面
    }
    homeRequest.getgroupData(data)
        .then((res) => {
            mdList.value = res.data
            if (mdList.value.ap !== null) {
                if (mdList.value.ap.news.length > 0) {
                    moreNewTitle.value = mdList.value.ap.author
                    newsFotureData.value = mdList.value.ap.news
                }
                //更多新闻标题
                if (mdList.value.auto !== null) {
                    nationName.value = mdList.value.auto.authors
                    if (mdList.value.auto.news.length > 0) {
                        usNewsData.value = mdList.value.auto
                    }
                }
                if (mdList.value.bs !== null) {
                    timeNewsData.value = mdList.value.bs.news
                    isTimeTable.value = true
                }
            }
        })
}
// 股票接口 
const tickerNameData = ref([])
const isTicker = ref(false)
const getTickList = (tabKey) => {
    let data = {
        key: tabKey  //当前页面
    }
    homeRequest.getTicketData(data)
        .then((res) => {
            tickerNameData.value = res.data
            isTicker.value = true
        })
}
</script>
<style scoped lang='scss'>
.cover {
    width: auto;
}
</style>